<template>
	<view>
		<view class="container">
			<view v-if="selectShow">
				<!-- 步骤条组件 -->
				<Steps :rateNum="rateNum" v-if="rateNum!=4"></Steps>
				<view class="essential" v-if="rateNum!=4">
					<!-- 用户基本信息区域  第一步-->
					<view v-if="rateNum==1">
						<!-- 头部标题区域  -->
						<view class="header_title">
							<view>基本信息</view>
							<view>填写真实信息，匹配相仿的Ta</view>
						</view>

						<!--用户区域 -->
						<view class="box">
							<!-- 用户头像 -->
							<view class="user_head" @click="headleUpHead">
								<view v-if="avatarUrl==''">
									<image src="/static/image/avatar.png"></image>
								</view>
								<image v-else mode="aspectFill" :src="avatarUrl"></image>
								<view>上传本人照片，给对方留个好印象</view>
							</view>
							<!--基本信息选项-->
							<form @submit="formSubmit">
								<!-- 昵称 -->
								<view class="item message_name">
									<view class="le">
										<image src="/static/image/nickname.png"></image>
										<view>昵称</view>
									</view>
									<input type="text" :value="nicknNameValue" @input="headleNickname"
										placeholder="输入您的昵称" />
								</view>

								<!-- 性别 -->
								<view class="item message_birthday">
									<view class="le">
										<image src="/static/image/sex.png"></image>
										<view>性别</view>
									</view>
									<picker :range="sexList" :value="sexIndex" :disabled="sexState" @change="headleSex">
										<view v-if="sexIndex!==null" class="opt">
											<view :class="{'sexdesabled':sexState}">{{sexList[sexIndex]}}</view>
											<image v-if="!sexState" src="/static/image/ri.png"></image>
										</view>
										<view v-else class="ri" @change="headleSex">
											<view>点击选择</view>
											<image src="/static/image/ri.png"></image>
										</view>
									</picker>
								</view>

								<!-- 生日 -->
								<view class="item message_birthday">
									<view class="le">
										<image src="/static/image/birthday.png"></image>
										<view>生日</view>
									</view>
									<picker mode="date" @change="headleDateChenge">
										<view v-if="dateValues" class="opt">
											<view>{{dateValues}}</view>
											<image src="/static/image/ri.png"></image>
										</view>
										<view v-else class="ri">
											<view>点击选择</view>
											<image src="/static/image/ri.png"></image>
										</view>
									</picker>
								</view>

								<!-- 星座 -->
								<view class="item message_birthday">
									<view class="le">
										<image src="/static/image/constellation.png"></image>
										<view>星座</view>
									</view>
									<picker :range="constellationList" :value="seatIndex" @change="headleSeat">
										<view v-if="seatIndex!==null" class="opt">
											<view>{{constellationList[seatIndex]}}</view>
											<image src="/static/image/ri.png"></image>
										</view>
										<view v-else class="ri">
											<view>点击选择</view>
											<image src="/static/image/ri.png"></image>
										</view>
									</picker>
								</view>

								<!-- 身高 -->
								<view class="item message_birthday">
									<view class="le">
										<image src="/static/image/stature.png"></image>
										<view>身高</view>
									</view>
									<picker :range="heightList" :value="HeightIndex" @change="headleHeight">
										<view v-if="HeightIndex!==null" class="opt">
											<view>{{heightList[HeightIndex]}}</view>
											<image src="/static/image/ri.png"></image>
										</view>
										<view v-else class="ri">
											<view>点击选择</view>
											<image src="/static/image/ri.png"></image>
										</view>
									</picker>
								</view>

								<!-- 现居城市 -->
								<view class="item message_birthday">
									<view class="le">
										<image src="/static/image/city.png"></image>
										<view>现居城市</view>
									</view>
									<view v-if="cityValue" class="opt" @click="headleCity">
										<view>{{cityProvinceValue}} · {{cityValue}}</view>
										<image src="/static/image/ri.png"></image>
									</view>
									<view v-else class="ri" @click="headleCity">
										<view>点击选择</view>
										<image src="/static/image/ri.png"></image>
									</view>
								</view>

								<!-- 现状 -->
								<view class="item message_birthday">
									<view class="le">
										<image src="/static/image/status.png"></image>
										<view>现状</view>
									</view>
									<picker :range="currentList" @change="headleCurren">
										<view v-if="currenIndex!==null" class="opt">
											<view>{{currentList[currenIndex]}}</view>
											<image src="/static/image/ri.png"></image>
										</view>
										<view v-else class="ri">
											<view>点击选择</view>
											<image src="/static/image/ri.png"></image>
										</view>
									</picker>
								</view>
							</form>
						</view>
					</view>

					<!-- 选择标签区域  第一步-->
					<view v-if="rateNum==2">
						<!-- 头部标签标题区域  -->
						<view class="header_title">
							<view>选择标签</view>
							<view>最多可以选择8个标签</view>
						</view>
						<!-- 关于自己 -->
						<view class="oneself">
							<!-- 标题 -->
							<view class="oneself_box">
								<view class="le">I 关于自己</view>
								<view class="ri" @click="headleSelectTag(0)">
									<view>{{checkedTagList.length}}/8</view>
									<image src="/static/image/ri_jt.png"></image>
								</view>
							</view>
							<!-- 标签区域 -->
							<view class="tag_box" @click="headleSelectTag(0)" v-if="!checkedTagList.length">
								<view class="default_tag">选择标签</view>
							</view>
							<view v-else class="checkedtag">
								<view v-for="(item,index) in checkedTagList" :key="index" class="active">{{item.name}}
								</view>
							</view>
						</view>

						<!-- 喜欢的类型 -->
						<view class="oneself">
							<!-- 标题 -->
							<view class="oneself_box">
								<view class="le">II 喜欢的类型</view>
								<view class="ri" @click="headleSelectTag(1)">
									<view>{{checkedFondList.length}}/8</view>
									<image src="/static/image/ri_jt.png"></image>
								</view>
							</view>
							<!-- 标签区域 -->
							<view class="tag_box" @click="headleSelectTag(1)" v-if="!checkedFondList.length">
								<view class="default_tag">选择标签</view>
							</view>
							<view v-else class="checkedtag">
								<view v-for="(item,index) in checkedFondList" :key="index" class="active">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>


					<!--距离 身份 年龄 第三步 -->
					<view v-if="rateNum==3">
						<!-- 头部标题区域  -->
						<view class="header_title">
							<view>匹配选项</view>
							<view>筛选心仪的Ta，精准匹配</view>
						</view>
						<view class="third">
							<view class="item">
								<view class="title">距离</view>
								<view class="item_tag">
									<view v-for="(item,index) in distanceList" :class="{'active':item.state}"
										:key="item.id" @click="headleDistance(index)"> {{item.location}}</view>
								</view>
							</view>
							<view class="item">
								<view class="title">身份</view>
								<view class="item_tag">
									<view v-for="(item,index) in identityList" :class="{'active':item.state}"
										:key="item.id" @click="headleIdentity(index)"> {{item.location}}</view>
								</view>
							</view>
							<!-- 年龄区域 -->
							<view class="item">
								<view class="title">年龄</view>
								<view class="cj-slider">
									<view class="cj-slide__text">{{`${priceValue[0]} (周岁) - ${priceValue[1]} (周岁)`}}
									</view>
									<!-- 双向滑动条组件 -->
									<cj-slider v-model="priceValue" :min="18" height="12" :max="35"
										activeColor="#8271EF" inactiveColor="#F4F5F5" blockColor="#8271EF" :step="1"
										:blockWidth="28" @start="blockStart" moveHeight="0" @moving="blockMoving"
										@end="blockEnd" />
									<view class="default_num">
										<view>18</view>
										<view>35+</view>
									</view>
								</view>
							</view>
							<view class="relation">
								<view class="title">
									联系方式
								</view>
								<view class="content">
									<view class="item">
										<view>
											<image src="/static/image/phone.png"></image>
											<view>手机号码</view>
										</view>
										<input :value="PhoneValue" @input="headlePhone" placeholder="输入您的手机号"
											type="text" />
									</view>
									<view class="item">
										<view>
											<image src="/static/image/weixin.png"></image>
											<view>微信号</view>
										</view>
										<input :value="WeChatValue" @input="headleWeChat" placeholder="输入您的微信号"
											type="text" />
									</view>
								</view>
								<view class="explain">不会展示给其他用户，请放心填写</view>
							</view>
						</view>
					</view>

				</view>
				<view v-if="rateNum===4" class="mian">
					<!-- 支付 第四步-->
					<PayMent v-if="rateNum===4" @headlePayment="headlePayment" :Arrinfo="Arrinfo"
						@headleEdit="headleEdit" @headleChecked="headleChecked"></PayMent>
					<view class="boxss">
						<wx-open-subscribe ref="subscribeBtn" :template="subTemplateId" id="subscribe-btn">
							<script type="text/wxtag-template">
								<style> .btn { padding: 24upx;height: 120upx;}</style>
						    <button class="btn">
								点击点击点击点击点击点击点击点击点击点击点击点击点击点击点击点击点击点击
							</button>
						  </script>
						</wx-open-subscribe>
					</view>
				</view>

				<!-- 下一步或者下一步按钮 -->
				<view v-if="rateNum!==4">
					<view class="next_step" @click="headleNextBtn">{{rateNum===3?"保存":"下一步"}}</view>
					<view class="up_step" v-if="rateNum>1" @click="headleUpBtn">{{"上一步"}}</view>
				</view>
			</view>


			<!--第二步 标签区域  组件-->
			<label-list v-else :tagList="tagList" :tagFontList="tagFontList" :state="state" :checkFondNum="checkFondNum"
				:checkNum="checkNum" @headleTag="headleTag" @headleFinish="headleFinish"></label-list>

			<!-- 省市区选择器 -->
			<u-picker mode="region" v-model="show" :params="params" @confirm="headleConfirm">
			</u-picker>
		</view>
	</view>
</template>

<script>
	import Steps from '../../components/steps.vue'
	import labelList from '../../components/labelList.vue'
	import PayMent from '../../components/payment.vue'
	import cjSlider from '../../components/cj-slider/cj-slider.vue'
	import {
		getChecked
	} from '../../common/reuse.js'
	var jweixin = require('jweixin-module')

	export default {
		components: {
			Steps,
			labelList,
			PayMent,
			cjSlider
		},
		data() {
			return {
				rateNum: 1, //控制进度条进度
				avatarUrl: '', //用户头像
				nicknNameValue: '', //用户输入的昵称
				sexList: ["女", "男"], //控制用户性别
				sexIndex: null,
				sexState: false,
				dateValues: '', //生日
				// 星座列表
				constellationList: ["白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "摩羯座", "水瓶座", "双鱼座"],
				// 身高选择器
				heightList: [], //身高列表
				HeightIndex: null, //身高值
				seatIndex: null, //星座值
				cityProvinceValue: '', //城市 省级
				cityValue: '', //城市 市级
				//城市可选参数
				params: {
					province: true,
					city: true,
					area: false
				},
				currentList: ["学生党", "工作党"], //现状
				currenIndex: null, //现状
				//标签关于自己数组
				tagList: [],
				//标签喜欢类型数组
				tagFontList: [],
				checkNum: 0, //保存关于自己选中标签数量
				selectShow: true, //显示和隐藏标签列表
				checkedTagList: [], //选中关于自己标签数组
				checkFondNum: 0, //保存关于自己选中标签数量
				checkedFondList: [], //选中喜欢类型标签数组
				show: false, //控制现居城市选择器显示隐藏
				state: 0, //判断用户点击的是关于自己或喜欢类型
				// 距离列表
				distanceList: [{
						id: 0,
						location: "同省",
						state: true
					},
					{
						id: 1,
						location: "同市",
						state: false
					},
					{
						id: 2,
						location: "不限",
						state: false
					}
				],
				distanceCheck: 0,
				//身份列表
				identityList: [{
						id: 0,
						location: "学生党",
						state: true
					},
					{
						id: 1,
						location: "工作党",
						state: false
					},
					{
						id: 2,
						location: "不限",
						state: false
					}
				],
				identityCheck: 0,
				Time: null, //防抖 防止多次点击
				priceValue: [20, 29], // 年龄可以指定默认值
				PhoneValue: '', //用户手机值
				WeChatValue: '', //用户微信号值
				subTemplateId: ['8Uvon-foP0PyW3TcbllqokQelmiqOnBctl8fTfwZJhY',
					'SKG6uQJdZlvsDS86ql9S78A6YL7Z207Je85-H9tZ8HE', '8Icdi9jQZfy9s1iJ0ke7UXuARS4o1qR0CX84ASDxuvY',
					'0uwnOICQYDtCNFYXXe71yiuIRKMx3xHZrSQjWBBftbk', '4kh2CXv0ZV9vjWkvq6Se3MTKY8AQYwylIqFb2yQfVBw'
				],
				prval: 2,
				Arrinfo: null,
			}
		},
		onLoad(options) {
			if (options.status) {
				this.rateNum = parseInt(options.status)
			} else if (uni.getStorageSync('rateNum')) {
				this.rateNum = parseInt(uni.getStorageSync('rateNum'));
			}
			//身高
			for (let i = 140; i <= 200; i++) {
				this.heightList.push(i + 'cm')
			}


			this.$myRequesy({
				url: 'price/info',
			}).then(res => {
				this.Arrinfo = res.data
				this.Arrinfo = Object.values(this.Arrinfo)
			})
		},


		onReady() {
			let that = this
			jweixin.ready(function(res) {
				const btn = document.getElementById('subscribe-btn');
				btn.addEventListener('success', function(e) {
					let attend = false;
					let subscribeDetails = JSON.parse(e.detail
						.subscribeDetails);
					for (let i in that.subTemplateId) {
						let subKey = subscribeDetails[that.subTemplateId[
							i]];
						let status = JSON.parse(subKey);
						let type = false;
						switch (status.status) {
							case "reject":
								type = false;
								break;
							case "cancel":
								type = false;
								break;
							case "filter":
								type = false;
								break;
							default:
								type = true;
								break;
						}
						if (!type) {
							// 如果其中有一个模板没有订阅，则全部不通过过
							attend = false;
							break;
						} else {
							attend = true;
						}
					}
					if (!attend) {
						return;
					}
					uni.showToast({
						title: that.prval === 1 ? "报名中" : "加载中",
						mask: true,
						icon: "loading"
					})
					that.headlePayment(that.prval)

				});
				btn.addEventListener('error', function(e) {
					alert("取消")
				});

			});
		},
		methods: {
			getInfos() {
				let that = this
				this.$myRequesyPay({
					url: 'user/get_config',
					method: "POST",
					data: {
						wechaturl: location.href.split('#')[0]
					}
				}).then(res => {
					if (res.err_code === 0) {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature, // 必填，签名
							jsApiList: [], // 必填，需要使用的JS接口列表
							openTagList: ['wx-open-subscribe'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
						});

						jweixin.error(function(res) {

						});
					}
				})
			},


			//校验手机格式
			checkMobile(mobile) {
				return RegExp(/^1[3-9]\d{9}$/).test(mobile);
			},
			// 上传头像回调
			headleUpHead() {
				let that = this
				uni.chooseImage({
					count: 1,
					success(res) {
						let tempFilePaths = res.tempFilePaths[0]
						console.log(tempFilePaths)
						uni.showLoading({
								title: '上传中...',
							}),
							uni.uploadFile({
								url: getApp().globalData.linkUrl + 'upload-img',
								filePath: tempFilePaths,
								name: 'imgFile',
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								success(res) {
									console.log(res)
									let data = JSON.parse(res.data)
									if (data.code === 0) {
										that.avatarUrl = data.data.imgUrl
										uni.hideLoading()
									} else {
										uni.showToast({
											title: '文件格式错误',
											icon: 'none'
										})
										uni.hideLoading()
									}

								},
								fail(err) {
									console.log(err)
								}
							})
					}
				})
			},
			// 用户输入的昵称
			headleNickname(val) {
				this.nicknNameValue = val.detail.value
			},
			// 控制用户性别
			headleSex(val) {
				uni.showToast({
					title: "请正确选择,下一步之后不可修改",
					icon: "none"
				})
				this.sexIndex = val.detail.value
			},

			//控制用户生日
			headleDateChenge(val) {
				this.dateValues = val.detail.value
			},

			//控制用户星座
			headleSeat(val) {
				this.seatIndex = val.detail.value
			},
			//控制用户身高
			headleHeight(val) {
				this.HeightIndex = val.detail.value
			},
			//控制用户现居城市显示隐藏
			headleCity(val) {
				this.show = true
			},
			//用户现居城市值
			headleConfirm(val) {
				this.cityProvinceValue = val.province.label
				this.cityValue = val.city.label
			},

			//控制用户现状
			headleCurren(val) {
				this.currenIndex = val.detail.value
			},

			//下一步操作
			headleNextBtn() {
				if (this.rateNum === 1) {
					// 第一步
					if (this.nicknNameValue !== '' && this.avatarUrl !== '' && this.dateValues !== '' && this.province !==
						'' && this
						.sexIndex !== null && this.currenIndex !== null && this.dateValues !== '' && this.HeightIndex !==
						null) {
						this.submitBasicMessage()
					} else {
						uni.showToast({
							title: "都是必填项!",
							icon: "none"
						})
					}
				} else if (this.rateNum === 2) {
					//第二步
					if (this.checkedTagList.length !== 0 && this.checkedFondList.length !== 0) {
						this.submitTallTag()

					} else {
						uni.showToast({
							title: "请您选择标签类型",
							icon: "none"
						})
					}
				} else if (this.rateNum === 3) {
					//第三步
					if (this.PhoneValue.trim() && this.WeChatValue.trim()) {
						if (!this.checkMobile(this.PhoneValue)) {
							uni.showToast({
								title: "请输入正确的手机格式",
								icon: "none"
							})
							return
						}
						this.submitRegional()
					} else {
						uni.showToast({
							title: "都是必填项",
							icon: "none"
						})
					}


				}

			},

			//下一步 用户基本信息提交 第一步 
			submitBasicMessage() {
				this.$myRequesy({
					url: 'basic-info/update',
					method: 'POST',
					data: {
						nickName: this.nicknNameValue,
						avatarUrl: this.avatarUrl,
						gender: parseInt(this.sexIndex),
						birthday: this.dateValues,
						starSign: this.seatIndex,
						height: this.heightList[this.HeightIndex].slice(0, 3),
						province: this.cityProvinceValue,
						city: this.cityValue,
						situation: this.currenIndex
					}
				}).then(res => {
					if (res.code === 0) {
						this.SetAntIshake()
					}
				})
			},

			//下一步 关于自己/喜欢类型标签 第二步
			submitTallTag() {
				let myId = this.checkedTagList.map(item => item.id)
				let likeId = this.checkedFondList.map(item => item.id)
				this.$myRequesy({
					url: 'tag-info/update',
					method: 'POST',
					data: {
						my_tags: myId,
						like_tags: likeId
					}
				}).then(res => {
					if (res.code === 0) {
						this.SetAntIshake()
					}
				})
			},


			//下一步 匹配选项 第三步
			submitRegional() {
				let thta = this
				thta.$myRequesy({
					url: 'match-info/update',
					method: 'POST',
					data: {
						match_distance: this.distanceCheck,
						match_situation: this.identityCheck,
						match_min_age: this.priceValue[0],
						match_max_age: this.priceValue[1],
						phone: this.PhoneValue,
						wechat: this.WeChatValue,
					}
				}).then(res => {
					if (res.code === 0) {
						thta.SetAntIshake()
					}
				})
			},


			// 上一步 获取用户基本信息 第一步
			getBasicMessage() {
				this.$myRequesy({
					url: 'user/basic-info',
				}).then(res => {
					if (res.code === 0) {
						this.nicknNameValue = res.data.nickName
						this.avatarUrl = res.data.avatarUrl
						this.sexIndex = res.data.gender
						this.dateValues = res.data.birthday
						this.seatIndex = res.data.starSign
						this.HeightIndex = res.data.height - 140
						this.cityProvinceValue = res.data.province
						this.cityValue = res.data.city
						this.currenIndex = res.data.situation
						this.sexState = true
					}
				})
			},

			// 上一步 获取关于自己/喜欢类型标签 第二步
			getallTag() {
				let that = this
				this.$myRequesy({
					url: 'user/all-tags',
				}).then(res => {
					if (res.code === 0) {
						res.data.my_tags.forEach(item => item.state = true)
						res.data.like_tags.forEach(item => item.state = true)
						that.checkedTagList = res.data.my_tags
						that.checkedFondList = res.data.like_tags
						that.checkNum = that.checkedTagList.length
						that.checkFondNum = that.checkedFondList.length
					}
				})
			},

			//上一步 匹配选项 第三步
			getRegional() {
				this.$myRequesy({
					url: 'user/match-info'
				}).then(res => {
					if (res.code === 0) {
						this.distanceCheck = res.data.match_distance
						this.identityCheck = res.data.match_situation
						this.priceValue[0] = res.data.match_min_age
						this.priceValue[1] = res.data.match_max_age
						this.PhoneValue = res.data.phone
						this.WeChatValue = res.data.wechat
						this.distanceList.forEach((item, i) => i === this.distanceCheck ? item.state = true :
							item.state = false)
						this.identityList.forEach((item, i) => i === this.identityCheck ? item.state = true :
							item.state = false)
					}
				})
			},

			// 上一步
			headleUpBtn() {
				if (this.rateNum === 2) {
					this.getBasicMessage()
				} else if (this.rateNum === 3) {
					this.getallTag()
				} else if (this.rateNum === 4) {
					this.getRegional()
				}

				if (this.Time) {
					clearTimeout(this.Time)
				}
				this.Time = setTimeout(() => {
					this.rateNum -= 1
					uni.setStorageSync('rateNum', this.rateNum);
				}, 300)

			},

			headleEdit() {
				console.log(1111)
				if (this.rateNum !== 4) return
				if (this.Time) {
					clearTimeout(this.Time)
				}
				this.Time = setTimeout(() => {
					this.rateNum -= 1
					uni.setStorageSync('rateNum', this.rateNum);
				}, 300)
				this.getRegional()
			},

			// 下一步防抖回调
			SetAntIshake() {
				if (this.Time) {
					clearTimeout(this.Time)
				}
				this.Time = setTimeout(() => {
					this.rateNum += 1
					uni.setStorageSync('rateNum', this.rateNum);

				}, 300)

			},


			//关于自己选择标签
			headleSelectTag(e) {
				this.selectShow = false
				this.state = e
				this.$myRequesy({
					url: 'tags',
					data: {
						state: e
					}
				}).then(res => {
					if (res.code === 0) {
						res.data.forEach(item => item.state = false)
						if (this.state === 0) {
							this.tagList = res.data
							this.tagList.forEach(item => {
								this.checkedTagList.forEach(item1 => {
									if (item.id === item1.id) {
										item.state = item1.state
									}
								})
							})
						} else {
							this.tagFontList = res.data
							this.tagFontList.forEach(item => {
								this.checkedFondList.forEach(item1 => {
									if (item.id === item1.id) {
										item.state = item1.state
									}
								})
							})
						}

					}

				})
			},

			//点击标签选中或取消
			headleTag(index) {
				if (!this.state) {
					this.checkNum = getChecked(this.state, this.checkNum, this.tagList, index, this.checkFondNum, this
						.tagFontList)[0]
				} else {
					this.checkFondNum = getChecked(this.state, this.checkNum, this.tagList, index, this.checkFondNum, this
						.tagFontList)[1]
				}
			},

			// 关于自己完成按钮回调
			headleFinish() {
				if (!this.state) {
					this.checkedTagList = this.tagList.filter(item => item.state)
				} else {
					this.checkedFondList = this.tagFontList.filter(item => item.state)
				}
				this.selectShow = true
			},

			// 第三步 距离选择
			headleDistance(index) {
				this.distanceCheck = index
				this.distanceList.forEach((item, i) => i === this.distanceCheck ? item.state = true : item.state = false)

			},
			// 第三步 身份选择
			headleIdentity(index) {
				this.identityCheck = index
				this.identityList.forEach((item, i) => i === this.identityCheck ? item.state = true : item.state = false)
			},
			//  第三步  用户输入的手机号
			headlePhone(e) {
				this.PhoneValue = e.detail.value
			},
			//  第三步  用户输入的微信号
			headleWeChat(e) {
				this.WeChatValue = e.detail.value
			},

			//双向滑动条回调
			blockStart() {
				console.log('滑动触发')
			},
			blockMoving() {
				console.log('正在滑动中')
			},
			blockEnd() {
				this.priceValue = this.priceValue
				console.log(this.priceValue)
				console.log('滑动结束')
			},

			//微信支付
			headlePayment(val) {
				let id = uni.getStorageSync('id')
				let that = this
				if (val > 1) {
					if (this.Time) {
						clearTimeout(this.Time)
					}
					this.Time = setTimeout(() => {
						that.$myRequesy({
							url: 'pay',
							method: "POST",
							data: {
								state: val
							},
						}).then(res => {
							if (res.code === 0) {
								console.log(res)
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', {
										"appId": res.data.appId, //公众号ID，由商户传入     
										"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
										"nonceStr": res.data.nonceStr, //随机串     
										"package": res.data.package,
										"signType": res.data.signType, //微信签名方式：     
										"paySign": res.data.paySign //微信签名 
									},
									function(res1) {
										if (res1.err_msg == "get_brand_wcpay_request:ok") {
											// 使用以上方式判断前端返回,微信团队郑重提示：
											//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
											that.$myRequesy({ //报名接口
												url: 'user/regis',
												method: "POST",
												data: {
													order_no: res.data.out_trade_no,
													from_state: id || 0,
													state: val
												}
											}).then(res => {
												if (res.code === 0) {
													uni.redirectTo({
														url: '../succeed/succeed'
													})
												}

											})
										}
									});
							} else if (res.code === 3008) {
								uni.showToast({
									title: "假期期间，暂停报名！",
									icon: "none"
								})
							}
						})
					}, 500)
				} else {
					if (that.Time) {
						clearTimeout(that.Time)
					}
					that.Time = setTimeout(() => {
						that.$myRequesy({ //普通报名
							url: 'user/regis',
							method: "POST",
							data: {
								from_state: id || 0,
								state: val
							}
						}).then(res => {
							if (res.code === 0) {
								uni.redirectTo({
									url: '../succeed/succeed'
								})
							}
						})
					}, 500)

				}
			},


			headleChecked(val) {
				this.prval = val
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 80upx;
	}

	.essential {
		padding: 40upx;
		box-sizing: border-box;
	}

	/* 头部标题区域 */
	.header_title {
		color: #999;
		font-size: 26upx;
		padding-bottom: 30upx;
		border-bottom: 2upx dashed #eee;

		view:first-child {
			color: rgba(0, 0, 0, 0.8);
			font-size: 36upx;
			font-weight: 600;
			margin-bottom: 4upx;
		}
	}

	/* 基本信息选项区域 第一步*/
	.box {
		margin-top: 40upx;

		image {
			width: 42upx;
			height: 42upx;
			margin-right: 8upx;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 40upx 0upx;

			.le {
				display: flex;
				color: rgba(0, 0, 0, 0.35);
				font-size: 15px;
			}
		}

		/* 用户头像 */
		.user_head {
			text-align: center;
			margin-bottom: 58upx;
			color: rgba(0, 0, 0, 0.35);
			font-size: 24upx;

			view:first-child {
				margin: 0 auto;
				width: 190upx;
				height: 190upx;
				background-color: #F5F4FD;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 30upx;

				image {
					width: 110upx;
					height: 110upx;
				}
			}

			image {
				width: 190upx;
				height: 190upx;
				border-radius: 50%;
				margin-bottom: 30upx;
			}

		}

		/* 用户昵称 */
		.message_name input {
			color: #000;
			text-align: right;
		}

		/*用户性别 */

		/* 生日 */
		.message_birthday .ri {
			display: flex;
			font-size: 30upx;
			color: rgba(0, 0, 0, 0.35);

		}

		/* 右边箭头 */
		.opt {
			display: flex;

			image {
				margin-right: 0upx;
			}

			.sexdesabled {
				margin-right: 40upx;
				color: rgba(0, 0, 0, 0.35);
			}
		}


	}


	/* 下一步 */
	.next_step {
		margin: 0 auto;
		width: 510upx;
		height: 90upx;
		line-height: 90upx;
		border-radius: 200upx;
		background-color: rgba(130, 113, 239, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 30upx;
		text-align: center;
		box-shadow: 0px 0px 4upx 0px rgba(158, 149, 237, 100);
		font-weight: 600;
		margin-top: 40upx;
		margin-bottom: 26upx;
	}

	// 上一步
	.up_step {
		text-align: center;
		color: rgba(130, 113, 239, 100);
		font-size: 30rpx;
	}



	/* 关于自己  第二步*/

	.oneself {
		margin: 40upx 0upx 60upx;

		.checkedtag {
			display: flex;
			flex-wrap: wrap;

			.active {
				background-color: rgba(130, 113, 239, 100);
				color: #fff;
				font-weight: 600;
				height: 64upx;
				line-height: 64upx;
				font-size: 28upx;
				margin: 0upx 20upx 30upx 0upx;
				border-radius: 200upx;
				padding: 0upx 30upx;
			}
		}

		.oneself_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30upx;

			.le {
				color: rgba(0, 0, 0, 0.8);
				font-size: 32upx;
				font-weight: 600;
			}

			.ri {
				display: flex;
				color: rgba(158, 149, 237, 60);

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}

		/* 标签区域 */
		.tag_box .default_tag {
			border-radius: 200upx;
			width: 160upx;
			height: 64upx;
			line-height: 64upx;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(158, 149, 237, 100);
			font-size: 28upx;
			text-align: center;
			border: 2upx dashed rgba(158, 149, 237, 100);
		}
	}

	//第三步
	.third {
		.item {
			margin: 40upx 0upx;

			.title {
				margin-bottom: 30upx;
				color: rgba(16, 16, 16, 0.5);
				font-size: 30upx;
			}

			.item_tag {
				display: flex;
				justify-content: space-between;

				view {
					width: 202upx;
					height: 72upx;
					line-height: 72upx;
					border-radius: 200upx;
					background-color: #F5F4FD;
					color: rgba(158, 149, 237, 100);
					font-size: 28upx;
					text-align: center;
					border: 2upx solid rgba(158, 149, 237, 0.30);

				}

				.active {
					background-color: rgba(130, 113, 239, 100);
					color: rgba(255, 255, 255, 100);
					font-weight: 600;
					border: none;
				}
			}

			.cj-slider {
				width: 97%;
				margin: auto;
				height: auto;

				.default_num {
					display: flex;
					justify-content: space-between;

					color: rgba(0, 0, 0, 0.35);
					font-size: 13px;
					margin: 0rpx 15rpx;
					margin-top: 16upx;
				}

			}

			.cj-slide__text {
				text-align: center;
				padding: 20rpx;
				color: #8271ef;
				font-weight: 600;

			}

		}

		.relation {
			margin-top: 70upx;

			.title {
				color: rgba(0, 0, 0, 0.8);
				font-size: 30upx;
				font-weight: 600;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 102upx;
				padding: 30upx 60upx 30upx 40upx;
				box-sizing: border-box;
				border-radius: 100upx;
				background-color: #F5F4FD;
				font-size: 15px;
				margin: 30upx 0upx;
				border: 2upx solid rgba(158, 149, 237, 0.30);

				view {
					display: flex;
					align-items: center;
					color: rgba(130, 113, 239, 100);
				}

				image {
					width: 42upx;
					height: 42upx;
					margin-right: 10upx;
				}

				input {
					color: #000;
					text-align: right;
				}

			}

			.explain {
				color: rgba(16, 16, 16, 0.35);
				font-size: 24upx;
			}
		}
	}

	.boxss {
		height: 200upx;
		width: 100%;
		height: 120upx;
		opacity: 0;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 999;
	}
</style>
